/*
 * @Description: 头部导航栏
 * @Author: baimenghan
 * @Email: baimenghan@nnuo.com
 * @Date: 2022-02-25 09:32:43
 * @LastEditors: baimenghan
 * @LastEditTime: 2022-02-25 11:02:13
 * @FilePath: \daka\src\components\HeaderNav\HeaderNav.jsx
 */

import logo from "@/logo.svg";
import "./HeaderNav.sass";
import { Layout, Menu } from "antd";
import { NavLink } from "react-router-dom";

const { Header } = Layout;

// react router dom 6 使用：
// 1.Router组件包裹整个视图容器 2.Link组件实现路由跳转 3.Routes组件包裹Route组件匹配规则 4.Navigate组件进行重定向

// v5 与 v6 注意点：
// 1.Router组件和Link组件无变化
// 2.Route组件属性更新为element属性（原component属性），且需包裹在Routes组件中

function HeaderNav() {
  return (
    <Header className="header">
      <div className="logo-box">
        <img className="logo" src={logo} alt="" />
      </div>
      <Menu theme="dark" mode="horizontal" defaultSelectedKeys={["0"]}>
        <Menu.Item key="Home">
          <NavLink to="/home">首页</NavLink>
        </Menu.Item>
        <Menu.Item key="Config">
          <NavLink to="/config">配置</NavLink>
        </Menu.Item>
      </Menu>
    </Header>
  );
}

export default HeaderNav;
